<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="../../css/samples.css">
<style>
#read-results > div {
  float: left;
  width: 300px; height: 300px;
  overflow: scroll;
}
#read-results > div > div.title {
  width: 100%; height: 60px;
  font-weight: bold;
  border-bottom: 1px solid gray;
  background-color: lightgray;
}
#read-results > div > div.content{
  width: 100%; height: 100%;
}

</style>
<script type="text/javascript">
function filesSelected() {
  var results = document.getElementById("read-results");
  results.innerHTML = "";
  var files = document.getElementById("file").files;
  for (var i = 0; i < files.length; i++) {
    var result = document.createElement("div");
    var title = document.createElement("div");
    title.className = "title";
    title.textContent = files[i].name + "(" + files[i].size + "bytes)";
    var content = document.createElement("div");
    content.className = "content";
    result.appendChild(title);
    result.appendChild(content);
    results.appendChild(result);
    readFile(files[i], content);
  }
}
function readFile(file, contentArea) {
    var reader = new FileReader();
    reader.onloadend = function(e) {
      contentArea.textContent = reader.result;
    };
    reader.onerror = function() {
      switch (reader.error.code) {
      case FileError.NOT_FOUND_ERR:
        alert("ファイルが見つかりません:" + file.name);
        break;
      case FileError.NOT_READABLE_ERR:
        alert("ファイルを読み込めません:" + file.name);
        break;
      case FileError.SECURITY_ERR:
        alert("セキュリティエラー:" + file.name);
        break;
      case FileError.ABORT_ERR:
        alert("読み込みが中断されました:" + file.name);
        break;
      case FileError.ENCODING_ERR:
        alert("不正なエンコーディングです:" + file.name);
        break;
      }
    };
    var encodingList = document.getElementById("encoding");
    var encoding = encodingList.options[encodingList.selectedIndex].value;
    reader.readAsText(file, encoding);
}
</script>
</head>
<body>
<div class="header">
  <a target="ayuta" href="http://ayuta.co.jp">株式会社あゆた</a>
  </div>
  <h1>File APIのサンプル</h1>
  テキストファイルを指定してください（複数指定可）。
  結果が読み込まれ、↓に表示されます。<br>
  <input id="file" name="file" type="file" accept="image/*" multiple onchange="filesSelected()">
  <select id="encoding">
	<option selected>UTF-8</option>
	<option>Shift_JIS</option>
	<option>Windows-31J</option>
	<option>EUC-JP</option>
  </select>
  <div id="read-results">
  </div>
</form>
		<!-- Google Analytics Setting -->
		<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10177692-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
